<template>
  <el-card class="hot-search-card">
    <!-- 标题栏 -->
    <div class="header">
      <h3>微博热搜</h3>
      <el-button type="text" class="refresh-btn" @click="doHotList">
        <el-icon ><Refresh /></el-icon>点击刷新
      </el-button>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="我的" name="mine"></el-tab-pane>
      <el-tab-pane label="热搜" name="hot"></el-tab-pane>
    </el-tabs>

    <!-- 热搜列表 -->
    <div class="hot-list">
      <div class="hot-item" v-for="(item, index) in hotList.slice(0, hotList.length / 2)" :key="index" @click="handleRowClick(item)">
        <div class="index">{{ index + 1 }}</div>
        <div class="content">
          <div class="title">
            <span>{{ item.title }}</span>
            <el-tag v-if="item.tag" :type="getTagType(item.tag)" size="small">
              {{ item.tag }}
            </el-tag>
          </div>
          <div class="info">
            <span v-if="item.time">{{ item.time }}</span>
            <span v-if="item.browse"> 热度{{ item.browse }}</span>
            <span v-if="item.text">·{{ item.text.slice(0, 4) }}...</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer">
      <el-button type="text" @click="router.push('/hot')">查看完整热搜榜单</el-button>
    </div>
  </el-card>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
const activeTab = ref('hot')
const  hotList = ref([])
 /*const hotSearch = ref({
  title: '微博热搜',
  tag: '新',
  time: '09:05',
  heat: '1.2万',
  subTitle: '微博热搜'
}) */
 const router = useRouter()
const doHotList = async () => {
  try {
    const { data } = await axios.get('/api/top')
    hotList.value = data
  } catch (error) {
    console.error('热搜数据加载失败:', error)
  }
}

// ✅ 页面加载时自动执行刷新
onMounted(() => {
  doHotList()
})
const handleRowClick = (item) => {
  router.push(`/hotPost?id=${item.id}`)
}

const getTagType = (tag) => {
  const types = {
    '新': 'danger',
    '热': 'danger',
    '荐': 'success',
    '大促': 'warning'
  }
  return types[tag] || ''
}
</script>

<style scoped>
.hot-search-card {
  width: 300px;
  padding: 15px;
  border-radius: 8px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.header h3 {
  margin: 0;
  font-size: 16px;
}

.refresh-btn {
  color: #666;
  font-size: 12px;
}

.hot-list {
  margin-top: 10px;
}

.hot-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.hot-item:last-child {
  border-bottom: none;
}

.index {
  width: 24px;
  color: #ff8200;
  font-weight: bold;
  font-size: 14px;
}

.content {
  flex: 1;
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.title span {
  margin-right: 6px;
}

.info {
  font-size: 12px;
  color: #999;
  display: flex;
  gap: 8px;
}

.footer {
  text-align: center;
  margin-top: 15px;
}

.footer .el-button {
  color: #999;
  font-size: 12px;
}

/* 调整Element Plus组件样式 */
:deep(.el-tabs__item) {
  padding: 0 16px;
  font-size: 14px;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #f0f0f0;
}

:deep(.el-tag) {
  margin-left: 4px;
}

:deep(.el-tag--danger) {
  background-color: #ff4e4e;
  color: white;
}

:deep(.el-tag--success) {
  background-color: #4eb7ff;
  color: white;
}

:deep(.el-tag--warning) {
  background-color: #ff8200;
  color: white;
}
</style>